#painter {
    width: 100%;
    user-select: none;
    background: #fff;
    height: 100%;
}

#painterBar {
    height: 45px;
    background: #fff;
    border-bottom: 1px solid #eee;
}

#painterCan {
    position: relative;
    height: calc(100% - 45px);
}

#painter>#painterCan>canvas {
    position: absolute;
    left: 0px;
    top: 0px;
}

#painterText {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    z-index: 11;
    color: red;
    background: none;
    display: none;
    font-size: 14px;
}

#painterBar span {
    float: left;
    margin: 15px;
    width: 25px;
    height: 25px;
    /* background: url(./img/painterBrush2.png); */
    margin-top: 10px;
    cursor: pointer;
}

.painterBrush {
    background: url(./img/painterBrush2.png);
}

.painterBrush.painter-active {
    background: url(./img/painterBrush1.png);
}

.painterErase {
    background: url(./img/painterErase2.png);
}

.painterErase.painter-active {
    background: url(./img/painterErase1.png);
}

.painterHook {
    background: url(./img/painterHook2.png);
}

.painterHook.painter-active {
    background: url(./img/painterHook1.png);
}

.painterFork {
    background: url(./img/painterFork2.png);
}

.painterFork.painter-active {
    background: url(./img/painterFork1.png);
}

.painterCircle {
    background: url(./img/painterCircle2.png);
}

.painterCircle.painter-active {
    background: url(./img/painterCircle1.png);
}

.painterBlock {
    background: url(./img/painterBlock2.png);
}

.painterBlock.painter-active {
    background: url(./img/painterBlock1.png);
}

.painterShowText {
    background: url(./img/painterShowText2.png);
}

.painterShowText.painter-active {
    background: url(./img/painterShowText1.png);
}

.painterBack {
    background: url(./img/painterBack2.png);
}

.painterBack.painter-active {
    background: url(./img/painterBack1.png);
}

.painterClear {
    background: url(./img/painterClear2.png);
}

.painterClear.painter-active {
    background: url(./img/painterClear1.png);
}

.painterDrag {
    background: url(./img/painterDrag2.png);
}

.painterDrag.painter-active {
    background: url(./img/painterDrag1.png);
}

.painterScaleBig {
    background: url(./img/painterScaleBig2.png);
}

.painterScaleBig.painter-active {
    background: url(./img/painterScaleBig1.png);
}

.painterScaleSmall {
    background: url(./img/painterScaleSmall2.png);
}

.painterScaleSmall.painter-active {
    background: url(./img/painterScaleSmall1.png);
}

.painterRotate {
    background: url(./img/painterRotate2.png);
}

.painterRotate.painter-active {
    background: url(./img/painterRotate1.png);
}

.painterBreak {
    background: url(./img/painterBreak2.png);
}

.painterBreak.painter-active {
    background: url(./img/painterBreak1.png);
}

#painterBar span.painterSave {
    float: right;
    width: 50px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin: 8px 15px 0;
    background: #3b90ff;
    border-radius: 2px;
    color: #fff;
    cursor: pointer;
}